<template>
  <view-box ref="viewBox" body-padding-bottom="55px">
    <tab bar-active-color="#01aaef" active-color="#01aaef" :line-width="2">
      <tab-item selected @on-item-click="_getData(2)" :badge-label="userInfo ? userInfo.qingbi + '' : ''">轻币</tab-item>
      <tab-item @on-item-click="_getData(3)" :badge-label="userInfo ? userInfo.zhuangbi + '' : ''">装币</tab-item>
    </tab>
    <group :gutter="0" v-if="list !== null && list.length > 0">
      <cell v-for="(item, index) in list" :key="index" :title="item.description" >
        <span v-if="item.type === 1">+</span>
        <span v-else>-</span>
        {{item.number}}
      </cell>
    </group>
    <empty tips="亲，本月没有相关记录" v-if="list !== null && list.length === 0"></empty>
    <footer-bar slot="bottom" selected="jifen"></footer-bar>
  </view-box>
</template>
<script>
  import { ViewBox, Tab, TabItem, Countup, Group, Cell } from 'vux'
  import Empty from '@/views/components/Empty'
  import FooterBar from '../components/FooterBar2'
  export default {
    data () {
      return {
        list: null
      }
    },
    computed: {
      userInfo () {
        return this.$store.getters.userInfo
      }
    },
    components: {
      ViewBox,
      Tab,
      TabItem,
      Empty,
      Countup,
      Group,
      Cell,
      FooterBar
    },
    mounted () {
      this._getData(2)
    },
    methods: {
      _getData (category) {
        this.$vux.loading.show()
        this.$http.get('/integrals?by_month=1&category=' + category).then((response) => {
          this.$vux.loading.hide()
          this.list = response.data
        }).catch((error) => {
          this.$vux.loading.hide()
          console.log(error)
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .overwrite-title {
    margin-top: 5px;
  }
  .integral{
    background-color: #01aaef;
    padding: 32px 20px;
    color: #fff;
    p {
      text-align: center;
    }
  }
  .number {
    font-size: 35px;
  }
</style>